<template>
	<view class="mi-circle-commend">
		<popComment :show='show' :total='total' :comment_type='comment_type' :product_id='productId'
			@closePop='closePop'></popComment>
		<template v-if="rec_list.length===0">
			<noData></noData>
		</template>
		<template v-else>
			<view class="touchBox list-container">
				<block v-for="(item,index) in rec_list" :key="index">
					<template v-if="item.content&&item.content.content_type==100">
						<view class="card rec-card" @click="toMicirleDetail(item)">
							<view class="user">
								<view class="user-avatar">
									<LazyLoad :src="item.content.icon" width='100%' height='100%'></LazyLoad>
								</view>
								<view class="user-info">
									<view class="user-info-name">
										{{item.content.nickname}}
									</view>
								</view>
								<view class="user-ctrl"></view>
							</view>
							<view class="card-content">
								<view class="normal">
									<view class="content">
										{{item.content.content}}
									</view>
									<template
										v-if="item.content.pic_list.length!==0||item.content.video_list.length!==0">
										<imageList :pic_list='item.content.pic_list'
											:video_list='item.content.video_list'>
										</imageList>
									</template>
								</view>
							</view>
							<view class="card-ctrl">
								<view class="shar-btn">
									<image src="../../../static/images/m_b_share.png" mode=""></image>
								</view>
								<view class="send-btn" @click.stop="commentItem(item,100)">
									<image src="../../../static/images/m_b_msg.png" mode=""></image>
									<text class="num">{{item.content.comment_num}}</text>
								</view>
								<view class="praise-btn">
									<image src="../../../static/images/m_b_praisa.png" mode=""></image>
									<text class="num">{{item.content.praise_num}}</text>
								</view>
							</view>
						</view>

					</template>
					<template v-if="item.content&&item.content.content_type==6">
						<view class="card rec-card" @click="toMicirleQuestionDetail(item)">
							<view class="card-content">
								<view class="user-ctrl">
								</view>
								<view class="title el-flex">
									<view class="question-i">
										<image src="../../../static/images/quest.png" mode=""></image>
									</view>
									{{item.content.content}}
								</view>
								<view class="moment-tags moment-ask-tags">
									<view class="tags-item">
										<text>{{item.content.belong_place}}</text>
									</view>
								</view>
								<view class="line"></view>
								<view class="answers">
									<view class="answers-item el-flex"
										v-for="(i,j) in item.content.question.answer_list_v2" :key="j">
										<view class="icon">
											<LazyLoad :src="i.icon" width='100%' height='100%'></LazyLoad>
										</view>
										<view class="text">
											{{i.answer}}！
										</view>
									</view>
								</view>
							</view>

							<view class="card-ctrl">
								<view class="shar-btn">
									<image src="../../../static/images/m_b_share.png" mode=""></image>
								</view>
								<view class="send-btn" @click.stop="commentItem(item,6)">
									<image src="../../../static/images/m_b_msg.png" mode=""></image>
									<text class="num">{{item.content.comment_num}}</text>
								</view>
								<view class="praise-btn">
									<image src="../../../static/images/m_b_praisa.png" mode=""></image>
									<text class="num">{{item.content.praise_num}}</text>
								</view>
							</view>
						</view>

					</template>
					<template v-if="item.content&&item.content.content_type==1">
						<view class="card rec-card" @click="toDiscoverContent(item)">
							<view class="user">
								<view class="user-avatar">
									<LazyLoad :src="item.content.icon" width='100%' height='100%'></LazyLoad>
								</view>
								<view class="user-info">
									<view class="user-info-name">
										{{item.content.nickname}}
									</view>
									<view class="user-info-other">
										<text class="device">
											{{item.content.dev_type}}
										</text>
										<text>{{item.content.belong_place}}</text>
									</view>
								</view>
								<view class="user-ctrl"></view>
							</view>
							<view class="card-content">
								<view class="normal">
									<view class="content">
										{{item.content.content}}
									</view>
									<template
										v-if="item.content.pic_list.length!==0||item.content.video_list.length!==0">
										<imageList :pic_list='item.content.pic_list'
											:video_list='item.content.video_list'>
										</imageList>
									</template>
								</view>
							</view>
							<view class="card-message"
								v-if="item.content.hot_comment&&Object.keys(item.content.hot_comment).length!==0">
								<view class="card-message-item">
									<view class="p">
										<text class="name">
											{{item.content.hot_comment.name}}：
										</text>
										{{item.content.hot_comment.comment}}
									</view>
									<view class="p">
										<text class="name">
											{{item.content.hot_comment.belong_place}}
										</text>
									</view>
								</view>
							</view>
							<view class="card-ctrl">
								<view class="shar-btn">
									<image src="../../../static/images/m_b_share.png" mode=""></image>
								</view>
								<view class="send-btn" @click.stop="commentItem(item,1)">
									<image src="../../../static/images/m_b_msg.png" mode=""></image>
									<text class="num">{{item.content.comment_num}}</text>
								</view>
								<view class="praise-btn">
									<image src="../../../static/images/m_b_praisa.png" mode=""></image>
									<text class="num">{{item.content.praise_num}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-if="item.content&&item.content.content_type==99">
						<view class="card rec-card" @click="toMicirleEveDetail(item)">
							<view class="user">
								<view class="user-avatar">
									<image :src="item.content.icon" mode=""></image>
								</view>
								<view class="user-info">
									<view class="user-info-name">
										{{item.content.nickname}}
									</view>
								</view>
								<view class="user-ctrl"></view>
							</view>
							<view class="card-content">
								<view class="normal">
									<view class="content">
										{{item.content.content}}
									</view>
									<imageList :pic_list='item.content.pic_list' :video_list='item.content.video_list'>
									</imageList>
								</view>
							</view>
							<view class="moment-tags" v-if="item.content.tag_list.length!==0">
								<view class="tags-item" v-for="(i,j) in item.content.tag_list" :key="j">
									<image src="../../../static/images/huati.png" mode=""></image>
									<text>{{i.tag}}</text>
								</view>
							</view>
							<view class="card-message">
								<view class="card-message-item"
									v-if="item.content.hot_comment&&Object.keys(item.content.hot_comment).length!==0">
									<view class="p">
										<text class="name">{{item.content.hot_comment.name}}：</text>
										{{item.content.hot_comment.comment}}
									</view>
									<view class="p">
										<text class="name">{{item.content.hot_comment.belong_place}}</text>
									</view>
								</view>
							</view>
							<view class="card-ctrl">
								<view class="shar-btn">
									<image src="../../../static/images/m_b_share.png" mode=""></image>
								</view>
								<view class="send-btn" @click.stop="commentItem(item,99)">
									<image src="../../../static/images/m_b_msg.png" mode=""></image>
									<text class="num">{{item.content.comment_num}}</text>
								</view>
								<view class="praise-btn">
									<image src="../../../static/images/m_b_praisa.png" mode=""></image>
									<text class="num">{{item.content.praise_num}}</text>
								</view>
							</view>
						</view>
					</template>
				</block>
			</view>

		</template>
	</view>
</template>

<script>
	import imageList from '../moment_images/moment_images.vue'
	import LazyLoad from '../../LazyLoad/LazyLoad.vue'
	import popComment from '../../popComment/popComment.vue'
	import noData from '../../noData/noData.vue'
	export default {
		props: ['product_id', 'commendAfter'],
		components: {
			imageList,
			LazyLoad,
			popComment,
			noData
		},
		data() {
			return {
				rec_list: [],
				show: false,
				total: 0,
				productId: '',
				comment_type: ''
			};
		},
		watch: {
			commendAfter(newVal) {
				this.getMizoneRec(true)
			}
		},
		methods: {
			closePop(e) {
				this.show = false
			},
			commentItem(item, num) {
				this.show = true
				if (num == 100) {
					this.comment_type = 'product_comment'
					this.productId = item.content.id
				} else if (num == 99) {
					this.comment_type = 'moment'
					this.productId = item.content.id
				} else if (num == 1) {
					this.comment_type = 'communicate'
					this.productId = item.content.id
				} else if (num == 6) {
					this.comment_type = 'qa_reply'
					this.productId = item.content.announce_id
				}
				if (item.content.comment_num == '') {
					this.total = 0
				} else {
					this.total = item.content.comment_num
				}
			},
			toMicirleDetail(item) {
				let id = item.content.id
				if (id) {
					uni.navigateTo({
						url: `/secPage/micircleDetail/micircleDetail?id=${id}`,
					})
				}
			},
			toMicirleEveDetail(item) {
				let id = item.content.id
				if (id) {
					uni.navigateTo({
						url: `/secPage/evaluateDetail/evaluateDetail?id=${id}`,
					})
				}
			},
			toDiscoverContent(item) {
				let id = item.content.id
				if (id) {
					uni.navigateTo({
						url: `/secPage/discoverContent/discoverContent?id=${id}`,
					})
				}
			},
			toMicirleQuestionDetail(item) {
				let id = item.content.announce_id
				if (id) {
					uni.navigateTo({
						url: `/secPage/micircleQuestion/micircleQuestion?id=${id}`,
					})
				}

			},
			getMizoneRec(flag) {
				this.$request.get('/getMizoneRec', {
					product_id: this.product_id,
					after: this.commendAfter,
				}).then((res) => {
					let list = res.data.data.rec_list
					if (flag) {
						this.rec_list = this.rec_list.concat(list)
					} else {
						this.rec_list = list
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			},

		},
		async mounted() {
			this.getMizoneRec()

		}
	}
</script>

<style scoped lang="scss">
	view {
		line-height: 1.4;
	}

	.mi-circle-commend {
		.list-container {
			.rec-card {
				padding-top: 0.3rem;
				text-align: left;

				&:not(:last-child):after {
					margin-left: -0.24rem;
					margin-right: -0.24rem;
					display: block;
					content: "";
					border-bottom: 0.12rem solid #f6f6f6;
				}


				.user {
					margin-bottom: 0.2rem;
					display: flex;
					align-items: center;

					.user-avatar {
						margin-right: 0.16rem;
						width: 0.52rem;
						height: 0.52rem;
						border-radius: 0.52rem;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.user-info {
						flex: 1;

						.user-info-name {
							font-size: .24rem;
							font-weight: 500;
							color: #161616;
							line-height: 1.4;
						}

						.user-info-other {
							font-size: .2rem;
							font-weight: 500;
							color: #757575;

							.device {
								padding-left: 0.2rem;
								position: relative;
								margin-right: .1rem;

								&:before {
									content: "";
									width: 0.13rem;
									height: 0.21rem;
									background: url(../../../static/images/phone.png) 50% no-repeat;
									background-size: 100% 100%;
									position: absolute;
									left: 0;
									top: 8%;
								}
							}
						}
					}

					.user-ctrl {
						margin-left: 0.1rem;
						width: 0.4rem;
						height: 0.4rem;
						background: url(../../../static/images/h_three.png) 50% no-repeat;
						background-size: 100% 100%;
					}
				}

				.card-message {
					padding: 0.16rem;
					margin-bottom: 0.14rem;
					background: #f6f6f6;
					border-radius: 0.1rem;

					.card-message-item {
						font-size: .26rem;
						font-weight: 400;
						color: #161616;
						line-height: 1.34;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;

						.p {
							.name {
								color: #757575;
							}
						}
					}
				}

				.card-content {
					margin-bottom: 0.27rem;
					position: relative;

					.user-ctrl {
						width: 0.4rem;
						height: 0.4rem;
						background: url(../../../static/images/h_three.png) 50% no-repeat;
						background-size: 100% 100%;
						position: absolute;
						top: 0;
						right: 0;
					}

					.title {
						margin-bottom: 0.12rem;
						max-width: 6.3rem;
						overflow: hidden;
						text-overflow: ellipsis;
						justify-content: flex-start;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-weight: 500;
						color: #161616;
						font-size: .3rem;

						.question-i {
							display: inline-block;
							margin-right: 0.08rem;
							width: 0.29rem;
							height: 0.29rem;
							vertical-align: -.038rem;

							image {
								width: 0.29rem;
								height: 0.29rem;
							}

						}
					}


					.line {
						margin-bottom: 0.23rem;
						display: block;
						height: 0;
						border-bottom: 1px solid hsla(0, 0%, 92%, .6);
					}

					.answers {
						.answers-item {
							display: flex !important;
							margin-bottom: 0.2rem;
							line-height: .32rem;
							font-size: .28rem;
							color: #000;
							justify-content: flex-start;

							.icon {
								margin-right: 0.16rem;
								width: 0.32rem;
								height: 0.32rem;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 0.32rem;
									height: 0.32rem;
								}
							}

							.text {
								max-width: 5.8rem;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}
						}
					}

					.normal {

						.content {
							font-size: .3rem;
							font-weight: 500;
							color: #161616;
							line-height: 1.6;
							word-wrap: break-word;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;


						}

					}
				}

				.moment-tags {
					max-height: 1.2rem;
					overflow: hidden;

					.tags-item {
						float: left;
						display: flex;
						align-items: center;
						padding: 0.09rem;
						margin-right: 0.14rem;
						max-width: 6.6rem;
						margin-bottom: 0.18rem;
						line-height: .24rem;
						border-radius: 0.06rem;
						font-size: .2rem;
						font-weight: 500;
						color: #757575;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						background: none;
						padding-left: 0px;
						padding-right: 0px;

						text {}
					}
				}

				.card-ctrl {
					padding: 0 .1rem;
					padding-bottom: 0.2rem;

					display: flex;
					justify-content: space-around;

					view {
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 0.4rem;
							height: 0.4rem;
							margin-right: .05rem;
						}

						.num {
							font-size: .24rem;
							font-family: DIN-Medium, DIN;
							font-weight: 500;
							color: #757575;
						}
					}
				}
			}
		}
	}
</style>